<template>
  <div id="video_con">
    <my-header ></my-header>
    <div id="video_content">
      <Su-breadcrumb ref="su_nav"></Su-breadcrumb>
      <div class="content_nav">
        <div class="content_nav_2">
          <ul class="content_nav_1_top">
            <li :class="{selecttitle:index==i}" v-for="(title,i) of videotitle" :key=i @click="changeIndex(i)"><span>{{title}}</span></li>
          </ul>
        </div>
        <div class="search_label">
          <ul class="content_search_label" v-for="(item,i) of videolabel[index]" :key=i>
            <div class="first_label">{{item.type}}:</div>
            <li :class="{selectlabel:selectvaluearr[i]==elem}" v-for="(elem,k) of item.labelarr" :key=k @click="changeSelect(elem,i)">{{elem}}</li>
          </ul> 
        </div>
        <div class="content_nav_3">
          <span @click="ascTimer" :class="{normallabel:normallabelindex==0}">最新</span>|<span @click="ascView" :class="{normallabel:normallabelindex==1}">最热</span>
          <span class="input_span"><label><input v-model="selectlocal" type="checkbox"> 只看本地商家提供</label></span>
        </div>
        <div class="content_video">
          <div class="content_v" v-for="(item,i) of videoarr" :key=i>
            <router-link :to="`/videodetail/${item.vid}`">
              <div>
                <img :src="`${item.vhomeimgurl}`" alt="">
              </div> 
              <div class="video_title">
                <span>{{item.vname}}</span>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>
<script>
//引入面包屑到杭组件
import SuBreadcrumb from '../components/sukai/breadcrumb.vue'
//引入封装的ajax请求函数
import {VoidPath} from '../api/sukai'
export default {
  // 注册子组件
  components:{SuBreadcrumb},
  data(){
    return{
      BNlabel:{first_title:'结婚',second_title:'结婚视频',third_title:'婚礼策划'},//面包屑导航数据
      videoallarr:[],                                                           //视频总数据存储数组
      videoarr:[],                                                              //用于渲染页面的数组
      videotitle:[],                                                            //标题栏渲染数组
      videolabel:[],                                                            //标签栏渲染数组
      index:0,                                                                  //当前选中控制变量(标题渲染下标,选中状态改变,渲染页面数组生成依据)
      selectvaluearr:["全部","全部","全部","全部","全部"],                        //标签样式控制数组
      titleindex:0,                                                             //未用
      selectlocal:false,                                                        //绑定查看本地选中状态
      selectarr:[],                                                             //存储查看本地商家提供数据数组
      ascViewarr:[],                                                            //储存按浏览量排序数组
      ascViewIndex:false,                                                       //李璐蓝量 排序开关
      ascTimerarr:[],                                                            //储存按时间排序数组
      ascTimerIndex:false,                                                       //事件排序开关
      normallabelindex:0                                                         //最热与最新状态选中变量
    }
  },
  methods:{
    async loadvideo_content(){
      
      // 获得视频标题数据
      const result1 = await VoidPath("/vtitle");
      // console.log(result1)
      // 对标题数组进行锅炉,不为空时放入渲染页面的title数组
      for(var k in result1[0]){
        if(result1[0][k]){
          this.videotitle.push(result1[0][k]);
        }
      }
      const result2  = await VoidPath("/vlabel");
      this.videotitle.forEach(elem=>{
        // console.log(elem)
        var arr = [];
        result2.forEach(item=>{
          if(item.title==elem){
            // item.splice
            var obj={},m = 0;
            var arr1 = [];
            for(var n in item){
              if(m>=3&&item[n]){
                arr1.push(item[n])
              }
              obj[n]=item[n]
              m++;
            }
            obj.labelarr=arr1;
            arr.push(obj);
          }
        })
        // console.log(arr)
        this.videolabel.push(arr)
      })
      //获取video总表数据
      this.videoallarr = await VoidPath('/vid');
      // 加工形成渲染页面数组
      this.videoarr = this.videoallarr.filter(item=>{
        return item.vtype1==this.videotitle[this.index]
      })
      document.title=this.videotitle[this.index]
      // console.log(this.videoallarr,this.videotitle[this.index],this.videoarr)
      // console.log(this.videolabel)
    },
    changeIndex(Index){
      if(Index!=this.index){
        this.index = Index;
        this.normallabelindex = 0;
        // console.log(this.videotitle[Index])
        this.videoarr = this.videoallarr.filter(item=>{
        return item.vtype1==this.videotitle[this.index]
      })
      }
    },
    changeSelect(value,i){
      if(this.selectvaluearr[i]!=value){
        // console.log(i,value)
        this.selectvaluearr[i]=value
        // console.log(this.selectvaluearr)
        if(value=="全部"){
          this.videoarr = this.videoallarr.filter(item=>{
            return item.vtype1==this.videotitle[this.index]
          })
        }else{
          this.videoarr = this.videoallarr.filter(item=>{
            return item.vtype1==this.videotitle[this.index]
          })
          // console.log(this.videoarr)
          this.videoarr = this.videoarr.filter(item=>{
            return item.vlabel1==value||item.vlabel2==value||item.vlabel3==value||item.vlabel4==value||item.vlabel5==value||item.vlabel6==value
          })
          // console.log(this.videoarr)
        }
        this.localarr = this.videoarr;
        this.$forceUpdate()
      }
    },
    sortfunction(prop){
      return function(obj1,obj2){
        var val1 = obj1[prop];
        var val2 = obj2[prop];
        if(!isNaN(Number(val1))&&!isNaN(Number(val2))){
          val1 = Number(val1);
          val2 = Number(val2);

        }
        if(val1 < val2){
          return -1;
        }else if(val1> val2){
          return 1;
        }else{
          return 0
        }
      }
    },
    ascTimer(){
      
    },
    ascView(){
      // this.ascViewarr = this.videoarr;
      // for(var i=0;i<=this.videoarr.length;i++){
      //   var obj = {}
      //   for(var k of this.videoarr){
      //     console.log(this.videoarr.ViewingTimes)
      //     // if(){
      //     //   ViewingTimes
      //     // }else{}

      //   }
      // }
      // console.log(111)
      this.videoarr.sort(this.sortfunction('ViewingTimes'));
      this.normallabelindex =1 
      // console.log(this.ascViewarr)
    }
  },  
  mounted(){
    this.loadvideo_content();
    // console.log(this.$refs.su_nav)
    this.$refs.su_nav.jiazaiBNlabel(this.BNlabel)
  },
  watch:{
    selectlocal(){
      // console.log(this.selectlocal)
      if(this.selectlocal){
        this.localarr = this.videoarr;
        this.videoarr = this.videoarr.filter(item=>{
          return parseInt(item.islocal) == 1
        })
      }else{
        this.videoarr = this.localarr;
      }
    },
    index(){
      document.title=this.videotitle[this.index]
    }

  }
}
</script>
<style scoped>
*{
  padding:0;margin:0;box-sizing:border-box;
}
/* 1.声明内容区域样式 */
#video_con{
  /* margin-top:5px; */
}
#video_content{
  width: 1200px;
  margin:  0 auto;
  margin-top:20px;
}
.content_nav a{
  text-decoration:none;
  color:rgba(43, 42, 42, 0.7);
}
.content_nav ul{
  list-style: none;
  display:flex;
  flex-wrap:wrap;
}
 .content_nav_2,.search_label{
  border: 1px solid #e7e7e7;
}
.content_nav .content_nav_1{
  background:#f8f6f6;
  margin-top: 10px;
}
.content_nav .content_nav_1_top{
  float:left;
  margin: 0px;
}
.content_nav .content_nav_1_top li{
  width: 120px;
  font-size: 13px;
  heitht:40px;
  padding: 5px 0px;
  margin:5px 0px;
  display:block;
  text-align:center;
  /* border-left:1px solid #999995; */
}
.content_nav .content_nav_1_top li span{
  display:block;
  line-height:20px;
  border-right:1px solid #999995;
}
.content_nav .content_nav_1_top li.selecttitle span{
  /* border-right:0px; */
}
.selecttitle{
  background:rgb(243, 240, 240) !important;
}
.content_nav_2{
  color:rgb(129, 129, 129);
  margin-top:-10px;
  font-size:13px;
  padding:10px 10px;
  display:flex;
  flex-direction:start;
  background:#faf7f7fa;
}
.content_nav_2::after{
  content:'';
  display:block;
  clear:both;
}
.search_label{
  color:rgb(116, 114, 114);
  font-size:13px;
  padding:10px 15px;
  line-height:15px;
  background:#fff; 
  /* display:flex; */
  border-top:0px;
}
.first_label{
  width:80px;
  text-align: center;
  font-size:13px;
  padding:6px 10px;
  /* line-height:15px; */
}
.content_search_label{
  padding:5px 0px;
  border-bottom:1px dashed #e8e8e8;
}
.content_search_label:last-child{
  border-bottom:0px;
}
.content_search_label>li{
  padding:3px 8px;
  border:1px solid #fff;
  border-radius:5px;
  margin-left:10px;
}
.selectlabel{
  border:1px solid rgb(167, 88, 88) !important;
}
.content_search_label>li:hover{
  border:1 solid red ;
}
.content_nav_3{
  color:rgb(141, 140, 140);
  font-size:15px;
  margin-top:10px;
  padding:10px 5px;
  border:1px solid #e8e8e8;
}
.content_nav_3 span:first-child,span:nth-child(2){
  padding:5px 10px;
}
.input_span{
  float:right;
}
.content_nav {
  margin: 15px auto;
}
.content_video{
  margin-top:15px;
  padding: 5px 0px;
}
.content_nav .content_v{
  width: 280px;
  /* height:200px; */
  float: left;
  margin: 0px 0px 25px 26px;
  /* margin-left:26px; */
  /* margin-bottom:25px; */
  border:1px solid #e8e8e8;
}
.content_nav .content_v:nth-child(4n+1){
  clear:both;
  margin-left:0px;
}
.content_nav .content_v img{
  width: 100%;
}
.content_nav .content_video::after{
  content:'';
  display:block;
  clear:both;
}
.video_title{
  width:100%;
  height:35px;
  line-height:25px;
  padding:2px 15px 2px 45px;
  background:url(http://qnm.hunliji.com/o_1aeed9hvb1mlc220ht917ab18vp7.png) no-repeat 12px 10px;
}
.video_title span{
  display:block;
  width:220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
}
.content_nav .content_v span{
  margin: 0 auto;
  align-items: center;
  font-size: 15px;
} 
.content_nav .content_v span>img{
  width:5%;
}
.normallabel{
  color:red;
}
</style>